<template>
  <div class="miningdetail">
    <newHeader/>
    <div class="w">
      <div class="panel">
        <div class="panel-title-box">
          <span class="panel-title">{{$t('router.hrtMiningDetail')}}</span>
        </div>
        <div class="panel-content">
          <h1 class="h1">
            <div class="panel-index">1</div>
            <span>{{$t('miningDetail.t1')}}</span>
          </h1>
          <p class="p">{{$t('miningDetail.t2')}}</p>
          <h2 class="h2">{{$t('miningDetail.t3')}}</h2>
          <p class="p">{{$t('miningDetail.t4')}}</p>
          <p class="p">{{$t('miningDetail.t5')}}</p>
          <p class="p info">{{$t('miningDetail.t6')}}</p>
          <h2 class="h2">{{$t('miningDetail.t7')}}</h2>
          <p class="p">{{$t('miningDetail.t8')}}</p>
          <p class="p">{{$t('miningDetail.t9')}}</p>
          <p class="p info">{{$t('miningDetail.t10')}}</p>
          <h2 class="h2">{{$t('miningDetail.t11')}}</h2>
          <p class="p">{{$t('miningDetail.t12')}}</p>
          <p class="p">{{$t('miningDetail.t13')}}</p>
          <p class="p info">{{$t('miningDetail.t14')}}</p>
          <p class="p tips">{{$t('miningDetail.t15')}}</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-content">
          <h1 class="h1">
            <div class="panel-index">2</div>
            <span>{{$t('miningDetail.t16')}}</span>
          </h1>
          <p class="p hasi"><i class="p-i"/>{{$t('miningDetail.t17')}}</p>
          <p class="p hasi"><i class="p-i"/>{{$t('miningDetail.t18')}}</p>
          <p class="p hasi"><i class="p-i"/>{{$t('miningDetail.t19')}}</p>
          <p class="p hasi"><i class="p-i"/>{{$t('miningDetail.t20')}}</p>
          <p class="p hasi"><i class="p-i"/>{{$t('miningDetail.t21')}}</p>
        </div>
      </div>
    </div>
    <newFooter/>
  </div>
</template>
<script>
import newHeader from '@/components/Header';
import newFooter from '@/components/Footer';

export default {
  name: 'index',
  components: {
    newHeader,
    newFooter,
  },
};
</script>
<style lang="scss" scoped>
.miningdetail{
  .panel{
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    margin-top: 22px;
    &:nth-of-type(1){
      margin-top: 50px;
    }
    .panel-title-box{
      height: 50px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0 #f2f2f2;
      border-radius: 3px;
      padding: 0 20px;
      .panel-title{
        color: #333333;
        line-height: 50px;
        font-size: 14px;
      }
    }
    .panel-content{
      padding: 63px 60px 77px 140px;
      .h1{
        position: relative;
        line-height: 36px;
        padding: 15px 0;
        height: 66px;
        span{
          font-size: 24px;
          color: #70c1b3;
          vertical-align: text-top;
        }
        .panel-index{
          position: absolute;
          top: 23px;
          left: -58px;
          width: 20px;
          height: 20px;
          border-radius: 10px;
          background-color: #70c1b3;
          font-size: 12px;
          line-height: 20px;
          color: #fff;
          text-align: center;
        }
      }
      .p{
        padding: 5px 0;
        font-size: 14px;
        color: #323232;
        line-height: 22px;
        &.info{
          color: #70c1b3;
        }
        &.tips{
          position: relative;
          margin-top: 42px;
          color: #e21973;
          vertical-align: text-top;
          &::before{
            position: absolute;
            top: 13px;
            left: -15px;
            content: ' ';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background-color: #e21973;
          }
        }
        &.hasi{
          padding: 33px 0;
          .p-i{
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background-color: #247ba0;
            margin-right: 8px;
            vertical-align: middle;
          }
        }
      }
      .h2{
        margin-top: 32px;
        padding: 34px 0;
        font-size: 16px;
        color: #70c1b3;
        line-height: 24px;
      }
    }
  }
}
</style>

